issue

• close [FE] 회원탈퇴 페이지 퍼블리싱 및 api 연결 #848

구현 이유

행동대장 서비스에 소셜 로그인을 도입하게 되었다. 그러면서 다양한 기능들이 새롭게 추가되어야 했는데, 그 중에 하나가 바로 회원탈퇴 기능이다.

회원 가입을 했기 때문에 당연히 회원 탈퇴를 할 수 있는 기능은 필수이다. 물론 자주 발생하지 않을 이벤트로 추측되지만, 그렇다고 개발자가 편하기 위해서 구글 스프레드 시트나 문의 사항으로 대체 할 수는 없다. 그렇게 된다면 사용자는 불편해지게 되면서 행동대장 서비스의 사용성이 안 좋아지게 될 것이다. 이는 우리 서비스에 대한 안 좋은 인식으로 퍼질 수 있다. 따라서, 회원탈퇴 기능도 사용자가 편할 수 있도록 구현하고자 신경썼다.

구현 과정

디자인

내가 개발하면서 가장 신경쓰는 부분은 UI/UX를 이쁘고 편하게 만드는 것이다. 그렇기에 디자인을 할 때, 토스를 참고하여 행동대장 서비스에 맞게 디자인을 신경썼다.

회원 탈퇴 기능에서 UI/UX 뿐 아니라 회원을 탈퇴하는 이유를 명확하게 수집하고자 했다. 단, 앞서 언급한 UX가 편하면서 탈퇴 이유 데이터를 수집할 수 있도록 해야 했다. 그러려면 사용자가 탈퇴하는 이유를 우리에게 말해줄 때 귀찮지 않게 해야 한다고 생각했다. 그래서 나는 탈퇴 이유를 큰 카테고리로 한 번 나누고, 그 카테고리 안에서 상세 내용을 선택할 수 있도록 다양한 선지를 사용자에게 주었다.

구현 | checkbox 컴포넌트

• Icon 컴포넌트에서 svg 아이콘의 색상을 변경할 수 없는 에러가 존재하여 수정하였습니다.
• check icon이 기존에 존재했지만 다른 곳에서 사용하고 있지 않았고, 현재 사용해야 하는 check와 색상 및 사이즈가 달랐기 때문에 해당 컴포넌트에서 사용하는 check 아이콘으로 변경했습니다.

구현 | textarea 컴포넌트

구현 | 회원 탈퇴 페이지 펴블리싱

• 회원 탈퇴를 위한 총 7가지의 페이지중 6가지 페이지 퍼블리싱 완료

  구현하지 않은 1가지 페이지는 현재 디자인 미확정 (사용방법 설명 페이지)

• useRequestDeleteUser 생성

  회원탈퇴 api 연결을 위해 apis 폴더에 user.ts 파일 생성. 해당 파일에 requestDeleteUser 함수 생성. endpoint api/users

  useRequestDeleteUser에서 requestDeleteUser 요청이 정상적으로 실행되면 querykey kakaoLogin과 kakaoClientId를 무효화 시킴.

  const useRequestDeleteUser = () => {
    const queryClient = useQueryClient();
  
    const {mutateAsync, ...rest} = useMutation({
      mutationFn: () => requestDeleteUser(),
      onSuccess: () => {
        queryClient.invalidateQueries({queryKey: [QUERY_KEYS.kakaoLogin]});
        queryClient.invalidateQueries({queryKey: [QUERY_KEYS.kakaoClientId]});
      },
    });
  
    return {deleteAsyncUser: mutateAsync, ...rest};
  };

  회원 탈퇴 api를 실행하기 때문에 이와 연관된 소셜 로그인 queryKey를 무효화 했는데.. 다른 부분들도 무효화 시킬 필요가 있을지? 의견 부탁드립니다-

• CheckBeforeWithdrawingStep

  해당 페이지는 회원 탈퇴를 진행하기 전 유의사항을 안내하는 페이지.

  const handleWithdraw = async () => {
      try {
        await deleteAsyncUser();
        handleMoveStep('withdrawalCompleted');
      } catch (error) {
        toast.error('회원 탈퇴에 실패했어요.', {
          showingTime: 3000,
          position: 'bottom',
        });
      }
    };

  해당 페이지의 탈퇴하기 버튼을 클릭하면 deleteAsyncUser가 실횅됨. 해당 함수가 정상적으로 실행되면 회원 탈퇴 완료 페이지(withdrawalCompleted) Step으로 이동함. 만약, 회원 탈퇴가 정상적으로 진행되지 않았을 경우 toast로 회원 탈퇴가 실패했다는 에러 메세지를 띄움.

구현 결과

• 회원 탈퇴 api가 정상적으로 요청되었을 경우에만 해당 페이지로 이동함

논의하고 싶은 것

회원탈퇴 routerUrl

회원탈퇴 페이지는 마이 페이지 하위에 존재하는 페이지입니다. 따라서 url도 ‘/mypage/withdraw’ 형식으로 가야한다고 생각했습니다. 다른 분들은 어떠신지 궁금합니다!

endpointPrefix 변경 논의

현재 endpointPrefix는 다음과 같이 존재합니다.

export const USER_API_PREFIX = '/api/events';
export const ADMIN_API_PREFIX = '/api/admin/events';
// 새로 추가된 api
export const MEMBER_API_PREFIX = '/api/users';

이번에 회원가입이 생기면서 새롭게 MEMBER_API_PREFIX를 추가하게 되었습니다.

현 상황의 네이밍은 혼동을 줄 수 있을 것이라고 판단했습니다.
events를 위한 prefix의 네이밍에 user를 사용하고 user를 위한 prefix에 member 네이밍을 사용하기 때문입니다.

따라서, 위와 같은 네이밍을 아래와 같이 변경하는건 어떨지 논의하고 싶습니다!

export const EVENT_API_PREFIX = '/api/events';
export const ADMIN_API_PREFIX = '/api/admin/events';
export const USER_API_PREFIX = '/api/users';

useRequestDeleteUser

위에서도 언급한것과 같이 queryKey를 소셜 로그인과 관련된 것만 무효화하면 될지.. 아님 추가적으로 행사들도 모두 무효화하는 것이 좋을지 다른 분들의 생각이 궁금합니다.

또한, 회원 탈퇴 api가 정상적으로 요청이 가는 것은 확인했으나, 진짜로! 정상적으로 회원탈퇴가 잘 이뤄졌는지는 확인하지 못했습니다~

구현과 관련된 공유 사항

• 두번째 Step에서 Checkbox로 사유를 선택하거나 Textarea에 이유를 작성하는 등의 데이터 값들을 현재 상태관리는 하고 있지 않습니다. 이 부분은 다음 회의때 프엔+백엔드와 논의 후에 진행해야 할 것 같아서 제외했습니다. 다음 task에 같이 진행하도록 하겠습니다~

• 로그아웃 기능에 관하여 (구현X)
  기존에 제가 맡은 task에는 로그아웃 기능도 같이 존재했습니다. 이건 저번에도 논의했다 싶이 token이 만료되면 자동 로그아웃이 진행될텐데, 로그아웃 기능이 필요한지? 의문이 들어 여러분과 더 이야기를 나누고 싶습니다. 우리 서비스는 여러 계정이 필요한 서비스가 아닌 단 하나의 계정만으로 서비스 이용이 가능합니다. 따라서 사용자가 의도적으로 로그아웃 기능을 사용하는 경우는 거의 없을 것으로 보입니다. 그렇기에 일단은 로그아웃 기능이 필요한지..? 의문이 들어서 따로 구현은 진행하지 않았습니다.